<template>
	<view>
		<view class="couponbox">
			<view class="titbox">
				选择券
				<image src="../static/gb.png" @click="closen()"></image>
			</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll">
				<view class="couponlist" v-for="(item,index) in list" :key="index">
					<view class="leftbox">
						<!-- //coupon_type==1 coupon_money满减劵 coupon_type==2 折扣劵 -->
						<view style="margin-top: 30rpx;text-align: center;"
							v-if="item.coupon_type==1||item.coupon_type==3">
							<text style="font-size: 32rpx;">￥</text>
							<text v-if="item.coupon_type==1">{{parseFloat(item.coupon_money)}}</text>
							<text v-if="item.coupon_type==3">{{parseFloat(item.coupon_money)}}</text>
						</view>
						<view style="margin-top: 30rpx;text-align: center;" v-if="item.coupon_type==2">
							<text style="font-size: 32rpx;">{{parseFloat(item.discount_percent/10)}}折</text>
						</view>
					</view>
					<view class="rightbox">
						<view class="coupontype">
							<!-- {{item.use_type==1?'全平台':item.use_type==2?'商城':'外卖'}}可用 -->
							<text v-if="item.use_type==1">全平台可用</text>
							<text v-if="item.use_type==2">商城可用</text>
							<text v-if="item.use_type==3">外卖可用</text>
							<text v-if="item.use_type==4">商户可用</text>
							<text v-if="item.use_type==5">停车场可用</text>
							<text v-if="item.use_type==6">指定商品可用</text>
						</view>
						<view class="rule" v-if="item.coupon_type==1||item.coupon_type==2">满{{item.usable_money}}元使用
						</view>
						<view class="rule" v-if="item.coupon_type==3">满{{item.usable_money}}元使用</view>
						<view class="time" @click="handlecoupon(item,index)">

							<image v-if="index==actindex" src="../static/gou.png"></image>
							<image v-else src="../static/yuan.png"></image>
							<!-- <view>{{item.start_time|dateFormat}}-{{item.end_time|dateFormat}}</view> -->

							<!-- <view class="butbox">去使用</view> -->
						</view>
					</view>
				</view>
				<kong v-if="list.length==0"></kong>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	import kong from '@/components/kong.vue'
	export default {
		name: "coupon",
		components: {
			kong
		},
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				actindex: null,
			};
		},
		filters: {
			//过滤器 用于格式化时间
			dateFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + sdate //+ "- " + hour + ":" + minute //+ ":" + second;
				// 返回
				return result;
			},
		},
		onLoad() {
			console.log(this.list,'list')
		},
		methods: {
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			//关闭弹窗
			closen() {
				this.$emit("close")
			},
			//选择优惠卷
			handlecoupon(item, index) {
				if(this.actindex == index){
					this.actindex=null
					this.$emit("handlecoupon", '')
					this.$emit("close")
				}else{
					this.actindex = index
					this.$emit("handlecoupon", item)
					this.$emit("close")
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.couponbox {
		width: 750rpx;
		background-color: #FFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		.titbox {
			position: relative;
			text-align: center;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			height: 112rpx;
			border-bottom: solid 2rpx #DBDBDB;
			line-height: 112rpx;

			image {
				position: absolute;
				right: 30rpx;
				top: 36rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.scroll-Y {
			height: 560rpx;

			.couponlist {
				width: 690rpx;
				height: 172rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(249, 149, 41, 0.16);
				border-radius: 12rpx;
				display: flex;
				margin: 32rpx auto 0 auto;
				align-items: center;

				.leftbox {
					width: 164rpx;
					height: 172rpx;
					background: #FEF9E6;
					box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(249, 149, 41, 0.09);
					border-radius: 12rpx;
					font-size: 60rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #FE5326;
				}

				.rightbox {
					padding: 0 20rpx;
					width: 526rpx;
					height: 172rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(249, 149, 41, 0.16);
					border-radius: 12rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.rule {
						font-size: 34rpx;
						font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
						font-weight: normal;
						color: #222222;
						// margin: 25rpx 0 20rpx 0;
					}

					.time {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
						font-weight: normal;
						color: #555555;

						.butbox {
							width: 146rpx;
							height: 54rpx;
							border-radius: 28rpx;
							border: 2rpx solid #F94D29;
							line-height: 54rpx;
							text-align: center;
							font-size: 28rpx;
							font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
							font-weight: normal;
							color: #F94D29;
						}

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.coupontype {
						position: absolute;
						top: 0;
						right: 0;
						width: 186rpx;
						height: 50rpx;
						background: linear-gradient(90deg, #fde4c8 0%, #FCE0B8 55%, #fde4c8 100%);
						border-radius: 0rpx 12rpx 0rpx 12rpx;
						font-size: 28rpx;
						font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
						font-weight: normal;
						color: #83431F;
						text-align: center;
						line-height: 50rpx;
					}
				}
			}
		}
	}
</style>